<template>

  <div id="app">
    <div>
      <van-nav-bar style="float: left;font-size: 20px" @click-left="sy" left-arrow/>
      <h5 style="font-size: 20px;margin-left: 40%;height: 40px">保洁工单</h5>
    </div>
    <div id="btl">
      <div id="xx">
        <van-dropdown-menu style="height: 40px">
          <van-dropdown-item style="height: 40px" v-model="value1" title="工单日期" :options="option1" @change="sqsj"/>
        </van-dropdown-menu>
        <van-icon name="arrow-down"/>&nbsp;&nbsp;&nbsp;<span style="font-size: 20px">|</span>
      </div>
      <div id="xx">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value2" title="优先级" @change="yxj" :options="option2"/>
        </van-dropdown-menu>
        <van-icon name="arrow-down"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 20px">|</span>
      </div>
      <div id="xx">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value3" title="工单类别" @change="gdlx" :options="option3"/>
        </van-dropdown-menu>
        <van-icon name="arrow-down"/>&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 20px">|</span>
      </div>
      <div id="xx" @click="list">
        <span>全部</span>
      </div>
    </div>


    <div id="zssj" v-for="item in data">
      <div id="xl">
        <span>工单编号: {{ item.code }}</span> <span id="zt" style="color: blue" v-if="item.yid==1">普通</span> <span
          id="zt" style="color: yellow" v-if="item.yid==2">紧急</span> <span id="zt" style="color: red"
                                                                             v-if="item.yid==3">特级</span>
        <br>
        <span>工单类别:<span v-if="item.type==1">保洁任务</span> <span v-if="item.type==2">维修任务</span> <span
            v-if="item.type==3">清理任务</span> </span><br>
        <span>工单时间:{{ item.gdtime }}</span>
        <van-button v-if="item.gdzt==1" id="ann" type="info"><p style="width: 50px">未派单</p></van-button>
        <van-button v-if="item.gdzt==2" id="ann" type="info"><p style="width: 50px">已退回</p></van-button>
        <van-button v-if="item.gdzt==3" id="ann" type="info"><p style="width: 50px">已挂单</p></van-button>
        <van-button v-if="item.gdzt==4" id="ann"  type="primary"><p style="width: 50px">已完成</p></van-button>
        <van-button v-if="item.gdzt==5" id="ann"  type="primary"><p style="width: 50px">已确认</p></van-button>
        <van-button v-if="item.gdzt==6" id="ann" type="primary"><p style="width: 50px">已关闭</p></van-button>
      </div>
    </div>

    <div>
      <!--      <van - select v-model="selectedValue" placeholder="请选择">-->
      <!--        <van-option-->
      <!--             v-for="(item, index) in optionsList"-->
      <!--             : key="index"-->
      <!--             : value="item.value"-->
      <!--             : label="item.label"-->
      <!--        />-->
      <!--      </van - select>-->
    </div>

    <!--    <div>-->
    <!--      <van-popover-->
    <!--          v-model="showPopover"-->
    <!--          trigger="click"-->
    <!--          :actions="actions"-->
    <!--          @select="onSelect"-->
    <!--      >-->
    <!--        <template #reference>-->
    <!--          <van-button type="primary">浅色风格</van-button>-->
    <!--        </template>-->
    <!--      </van-popover>-->
    <!--    </div>-->

  </div>

</template>

<script>

export default {
  data() {
    return {
      activeName: null,
      data: [],
      value1: 0,
      value2: 0,
      value3: 0,
      // value2: 'a',
      option1: [
        {text: '今日', value: 1},
        {text: '昨天', value: 2},
        {text: '两天前', value: 3},
      ],
      option2: [
        {text: '普通', value: 1},
        {text: '紧急', value: 2},
        {text: '特级', value: 3},
      ],
      option3: [
        {text: '保洁工单', value: 1},
        {text: '维修工单', value: 2},
        {text: '清洁工单', value: 3},
      ],
    };
  },
  created() {
    this.list();
  },
  methods: {
    sqsj(val) {
      console.log(val);
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listtime?times=` + val).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    },
    yxj(val){
      console.log(val);
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listyxj?yid=` + val).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    },
    gdlx(val){
      console.log(val);
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listgdlx?type=` + val).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    },
    sy() {
      this.$router.push('/')
    },

    list() {
      this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/list`).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    }

  },
}
</script>


<style scoped>
#ann {
  float: right;
  margin-right: 20px;
  margin-top: -20px;
  width: 60px;
  height: 35px;
}

#zt {
  float: right;
  margin-right: 25px;
}


#zssj {
  background-color: whitesmoke;
  margin-top: 5px;
}

#xl {
  //background-color: dodgerblue;
  margin-top: 5px;
  width: 100%;
  padding-left: 10px;
  //margin-left: 10px;
  //border: 1px solid #666;
}


#btl {
  width: 100%;
  height: 45px;
  background-color: blue;
  margin-top: -35px;
}

#app {
  margin-top: -20px;
}

#xx {
  float: left;
  font-size: 12px;
  color: white;
  width: 25%;
  height: 35px;
  text-align: center;
  line-height: 35px;
}

</style>